<template>
  <div class="goonlined">
    <div class="goonlined_top">
      <div class="goonlined_top_left">
        <h4>早上好 !, 罗马华医生</h4>
      </div>
      <div class="goonlined_top_right" @click="toOffline">
        <goonlinedButton />
      </div>
    </div>
    <div class="goonlined_middle">
      <van-tabs v-model:active="active" @click-tab="changeShow">
        <van-tab title="抢单">
          <onlineTable @listenClick="showToast" :list="grapOrdersList" />
        </van-tab>
        <van-tab title="预约">
          <onlineTable
            @listenClick="showToast"
            :list="appointList"
            :isbooking="isShow"
          />
        </van-tab>
      </van-tabs>
    </div>
    <div class="mask" v-show="showMask" @click="changeMask"></div>
    <div class="toast" v-show="showMask">
      <div class="toast_top">
        <span>20221.29</span>
        <span>下午</span>
      </div>
      <div class="toast_line"></div>
      <div class="toast_name">
        <div class="toast_name_top">患者信息</div>
        <div class="toast_name_body">
          {{ item.userInfo.name }} ,{{ item.userInfo.sex }},{{
            item.userInfo.age
          }}岁
        </div>
      </div>
      <div class="toast_describe">
        <div class="toast_describe_top">病情描述</div>
        <div class="toast_describe_body van-multi-ellipsis--l3">
          {{ item.content }}
        </div>
      </div>

      <div class="toast_toDetails" @click="toPatineDetail">
        <van-button type="primary" size="mini">查看详情</van-button>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import getGraboffers from "./goonlinedTableCom/user-grabOffsers";
import onlineTable from "./components/onlineTable.vue";
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import goonlinedButton from "./components/goonlined-button.vue";
export default {
  name: "goonlined",
  components: { goonlinedButton, onlineTable },
  setup() {
    const router = useRouter();
    const data = reactive({
      active: 0,
      isShow: false,
      showMask: false,
      grapOrdersList: [
        {
          id: 1,
          userInfo: { name: "罗", sex: "男", age: 21 },
          content: "肚子疼啊不知道为什么",
          stay: "4",
        },
        {
          id: 2,
          userInfo: { name: "汉", sex: "男", age: 21 },
          content: "肚子疼啊不知道为什么",
          stay: "4",
        },
        {
          id: 3,
          userInfo: { name: "罗汉罗汉", sex: "男", age: 21 },
          content: "肚子疼啊不知道为什么",
          stay: "4",
        },
        {
          id: 4,
          userInfo: { name: "罗汉汉汉汉", sex: "男", age: 21 },
          content: "肚子疼啊",
          stay: "4",
        },
      ],
      appointList: [
        {
          id: 1,
          userInfo: { name: "罗汉", sex: "男", age: 21 },
          content: "肚子疼啊不知道为什么",
        },
        {
          id: 2,
          userInfo: { name: "罗汉", sex: "男", age: 21 },
          content: "肚子疼啊不知道为什么",
        },
        {
          id: 3,
          userInfo: { name: "罗汉", sex: "男", age: 21 },
          content: "肚子疼啊不知道为什么",
        },
        {
          id: 4,
          userInfo: { name: "罗汉", sex: "男", age: 21 },
          content: "肚子疼啊不知道为什么",
        },
      ],
      item: {
        id: 1,
        userInfo: { name: "罗汉", sex: "男", age: 21 },
        content: "肚子疼啊不知道为什么",
        stay: "4",
      },
    });
    getGraboffers();
    function changeShow(e) {
      let name = e.name;
      data.isShow = name == 1 ? true : false;
    }
    function toOffline() {
      router.push({ path: "/home/receivePatient/" });
    }
    function toPatineDetail() {
      data.showMask = data.showMask ? false : false;
      let user = JSON.stringify(data.item);
      router.push({
        path: "/home/receivePatient/goonlined/patientDetails",
        query: { user },
      });
    }
    function showToast(item) {
      data.item = item;
      data.showMask = true;
    }
    function changeMask() {
      data.showMask = false;
    }

    return {
      ...toRefs(data),
      changeShow,
      toPatineDetail,
      showToast,
      changeMask,
      toOffline,
    };
  },
};
</script>

<style lang="scss" scope>
.toast {
  width: 80%;
  height: 35%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  padding: 10px;
  border-radius: 15px;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  &_toDetails {
    position: absolute;
    bottom: 5px;
    right: 10px;
  }
  &_describe {
    &_body {
      font-size: 16px;
      font-weight: 550;
    }
    &_top {
      font-size: 14px;
      color: #c7c4c4;
      margin: 10px 0;
    }
  }
  &_name {
    &_top {
      font-size: 14px;
      color: #c7c4c4;
      margin-bottom: 10px;
    }
    &_body {
      font-size: 16px;
      font-weight: 550;
    }
  }
  &_line {
    width: 100%;
    height: 2px;
    margin-bottom: 10px;
    background-image: linear-gradient(to right, #d3e9f1, #fafefe);
  }
  &_top {
    font-size: 18px;
    margin-bottom: 10px;
    & span {
      margin-right: 20px;
    }
  }
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #333;
  opacity: 0.3;
  z-index: 5;
}
.goonlined {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  overflow-y: scroll;
  z-index: 10;
  background-color: #fafafa;
  &_middle {
    margin-top: 20px;
    & .van-tab--active {
      color: #0b51ca;
    }
    & .van-tabs__line {
      background: #3072e0;
      width: 60px;
      height: 2px;
    }
  }
  &_top {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    &_left {
      max-width: 210px;
      word-break: break-all;
      position: relative;
      &::after {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        overflow: hidden;
        background-color: #07c160;
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        right: -10%;
      }
      & h4 {
        margin: 10px 0;
      }
    }
  }
}
</style>
